<template>
  <!-- 功能表 -->
  <div>
    <!-- 标题 -->
    <div class="toolListPart1">
      <div class="toolTitle">
        <div v-for="(data, index) in toolList" :key="index">
          <div :class="data.isUsed ? 'toolButton-used' : 'toolButton-unused'">
            <img
              class="toolIcon"
              :src="
                require('@/assets/images/icon/toolBar/' + data.img + '.png')
              "
              @click="childrenListShowController(data)"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 子列表 -->
    <div class="toolListPart2">
      <div class="toolList" v-for="(data, index) in toolList" :key="index">
        <transition name="childrenList-fade">
          <div class="childrenList" v-show="data.isUsed">
            <div
              :class="child.isUsed ? 'toolButton-used' : 'toolButton-unused'"
              v-for="(child, index) in data.children"
              :key="index"
              :keyWord="child.keyWord"
            >
              <img
                class="toolIcon"
                :src="
                  require('@/assets/images/icon/toolBar/' + child.img + '.png')
                "
              />
              <span class="toolText" @click="useTool(child)">{{
                child.label
              }}</span>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { getCurrentInstance, onMounted } from "vue";
import pubsub from "pubsub-js";

import message from "@/components/Message/showMessage";

export default {
  name: "bottomMenu",
  data() {
    return {
      toolList: [
        {
          label: "地图标绘",
          img: "地图标绘",
          isUsed: false,
          children: [
            {
              label: "点标绘",
              img: "点标绘",
              keyWord: "pointDrawing",
              isUsed: false,
            },
            {
              label: "面标绘",
              img: "面标绘",
              keyWord: "polygonDrawing",
              isUsed: false,
            },
            {
              label: "清除标绘",
              img: "清除标绘",
              keyWord: "clearDrawing",
              isUsed: false,
              threadFree: true,
            },
          ],
        },
        {
          label: "地图查询",
          img: "地图查询",
          isUsed: false,
          children: [
            {
              label: "点选查询",
              img: "点选查询",
              keyWord: "pointSelect",
              isUsed: false,
            },
            {
              label: "框选查询",
              img: "框选查询",
              keyWord: "polygonSelect",
              isUsed: false,
            },
          ],
        },
        {
          label: "CAD",
          img: "CAD",
          isUsed: false,
          children: [
            {
              label: "上传CAD",
              img: "上传CAD",
              keyWord: "uploadCAD",
              isUsed: false,
            },
          ],
        },
      ],
      subList: [],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    // 当前是否有功能正在运行
    let using = false;

    onMounted(() => {
      subscribeList();
    });

    // pubsub订阅
    function subscribeList() {
      proxy.subList.push(
        // 功能使用完成
        pubsub.subscribe("toolFinished", (n, data) => {
          let node = proxy.toolList[data.titleIndex].children[data.childIndex];
          console.log(node);
          node.isUsed = false;
          node.img = node.label;
          using = false;
        })
      );
    }

    // 功能使用控制
    function useTool(node) {
      // 开启功能
      if (!node.isUsed) {
        // 单线程限制
        if (using && !node.threadFree) {
          message("仅支持运行一个功能", "error");
          return;
        }
        using = true;
        node.isUsed = true;
        node.img = node.label + "-开启";
      }
      // 关闭功能
      else {
        using = false;
        node.isUsed = false;
        node.img = node.label;
      }
      // console.log(using);
      // 通知地图控件
      pubsub.publish(node.keyWord, { isUsed: node.isUsed });
    }

    // 子列表显示控制
    function childrenListShowController(data) {
      data.isUsed = !data.isUsed;
      data.img.indexOf("开启") === -1
        ? (data.img += "-开启")
        : (data.img = data.label);
    }

    return { useTool, childrenListShowController };
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/variables.less";
.toolListPart1 {
  position: absolute;
  z-index: 999;
  top: 6.5%;
  left: 16%;

  // 功能标题
  > .toolTitle {
    border-radius: 5px;
    padding: 0.2%;
    background-color: white;
    max-width: 40px;
    float: left;
    box-shadow: 0px 0 5px 2px @mainColor;
    > div {
      display: flex;
      > .toolButton-unused {
        text-align: center;
        display: inline-block;
        padding: 5px;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        > .toolIcon {
          width: 25px;
          display: inline-block;
          position: relative;
          padding-bottom: 5px;
          border-bottom: @mainColor 1px solid;
        }
      }
      > .toolButton-used {
        text-align: center;
        display: inline-block;
        width: 40px;
        height: 40px;
        padding: 5px;
        background-color: @mainColor;
        border-radius: 5px;
        > .toolIcon {
          width: 25px;
          display: inline-block;
          position: relative;
          padding-bottom: 5px;
          border-bottom: white 1px solid;
        }
      }
      > .toolButton-unused:hover {
        background-color: rgb(241, 241, 241);
      }
    }
  }
}

.toolListPart2 {
  position: absolute;
  z-index: 998;
  top: 6.5%;
  left: 18%;
  // 子功能列表
  .toolList {
    position: absolute;
    float: left;
    > .childrenList {
      background-color: white;
      margin: 2% 0%;
      box-shadow: 0px 0 5px 2px @mainColor;
      border-radius: 5px;
      > .toolButton-unused {
        padding: 2px 0;
        text-align: center;
        display: inline-block;
        border-right: @mainColor 1px solid;
        width: 120px;
        > .toolIcon {
          width: 25px;
          display: inline-block;
          position: relative;
          bottom: 1px;
        }
        > .toolText {
          font-family: "HGDH_CNKI";
          display: inline-block;
          font-size: 17px;
          margin-left: 2%;
          color: @mainColor;
          position: relative;
          top: 2px;
        }
      }
      > .toolButton-used {
        padding: 2px 0;
        text-align: center;
        display: inline-block;
        border-right: @mainColor 1px solid;
        width: 120px;
        background-color: @mainColor;
        border-radius: 3px;
        > .toolIcon {
          width: 25px;
          display: inline-block;
          position: relative;
          bottom: 1px;
        }
        > .toolText {
          font-family: "HGDH_CNKI";
          display: inline-block;
          font-size: 17px;
          margin-left: 2%;
          color: white;
          position: relative;
          top: 2px;
        }
      }
      > .toolButton-unused:last-child {
        border-right: transparent;
      }
      > .toolButton-unused:hover {
        background-color: rgb(241, 241, 241);
        border-radius: 5px;
      }
      // > .toolButton-unused:first-child:hover {
      //   border-top-right-radius: 0px;
      //   border-bottom-right-radius: 0px;
      // }
    }
  }

  .toolList:nth-child(1) {
    width: 360px;
  }
  .toolList:nth-child(2) {
    top: 42px;
    width: 240px;
  }
  .toolList:nth-child(3) {
    top: 85px;
    width: 120px;
  }
}

.childrenList-fade-enter-active {
  transition: all 0.3s;
}
.childrenList-fade-leave-active {
  transition: all 0.3s;
  transform: translateX(-100%);
}
.childrenList-fade-enter-from,
.childrenList-fade-leave-to {
  transition: 0.3s;
  transform: translateX(-100%);
}
</style>